/* 选择文档的根元素 */
:root {
  /* 声明一个自定义属性，属性名需要以两个减号（--）开始 */
  --primary-color: #31c27c;
}
body {
  /* 将body的上下左右外边距都设置为0 */
  margin: 0;
  /* 设置body的背景颜色 */
  background: #f5f5f5;
  /* 设置body内文本的字体 */
  font-family: Microsoft Yahei;
  /* 设置body内文本的大小 */
  font-size: 14px;
  /* min-width: 1000px; */
}
a {
  /* 规定添加到文本的装饰效果为“none" */
  text-decoration: none;
  /* 设置a内的文本颜色 */
  color: #000;
}
header {
  /* 将header的高度设置为90px */
  height: 90px;
  /* 设置header的背景颜色 */
  background: white;
  /* 将header的布局方式设置为弹性布局，
  设置为弹性布局之后，子元素的float、clear和vertical-align属性会失效。 */
  display: flex;
  /* 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式为中心对齐
  （虽然经过实测，将align注释后还是在中心对齐） */
  align-items: center;
}
/* <main> 标签用于指定文档的主体内容，
且在一个文档中，<main> 元素是唯一的 */
.header-inner, main {
  /* width: 1200px; */
  padding: 20px;
  margin: auto;
}
.tag-list {
  /* 外边距顶设置为50px，底设置为15px */
  margin-top: 50px;
  margin-bottom: 15px;
}
.tag-item {
  /* 将布局方式设置为行内块元素
  可以使元素在一行上显示 ，又能够改变元素的height，width的值. 使用padding，margin的top，left，bottom，right都能够撑开元素。
  相比于float浮动的元素会脱离文档流，需要通过清除浮动的方法来让元素显示在正常位置，
  inline-block不会脱离文档流，也可以让其元素在一行显示 */
  display: inline-block;
  /* 设置内边距（顺序为上 右 下 左）
  上下内边距设置为0px  
  左右内边距设置为8px */
  padding: 0 8px;
  margin-right: 24px;
  /* line-height是定义盒子的行高
  定义为26px
  height则是定义元素自身行高 */
  line-height: 26px;
  color: #000;
  text-decoration: none;
}
.tag-active {
  /* 使用var(）函数，通过“--primary-color”属性名来调用这个值 */
  background: var(--primary-color);
  color: white;
}
/* 当鼠标悬停在有“tag-item”选择器的不含有“tag-active”选择器的元素上时生效 */
.tag-item:not(.tag-active):hover {
  color: var(--primary-color);
}
.nowrap {
  /* 规定段落内文本不换行 */
  white-space: nowrap;
  /* 当元素内的内容溢出的时候，隐藏溢出的部分 */
  overflow: hidden;
  /* 当文本溢出包含他的元素时，显示省略符号 ... 来代表被修剪的文本 */
  text-overflow: ellipsis;
}
.playlist {
  /* 将布局方式设置为网格布局 */
  display: grid;
  /* grid-template-columns: 设置网格的列宽 
  repeat(auto-fill, minmax(200px,1fr)) 尽可能多地放下这些二百像素的网格
  1fr 的意思是“100%的剩余空间” */
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  /* 设置网格之间间距
  行间距为45px，列间距为15Px */
  gap: 45px 15px;
  margin-bottom: 45px;
}
.cover-wrap {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 15px;
  align-items: center;
  /* 设置弹性盒子元素在主轴（横轴）方向上的对齐方式为中心对齐 */
  justify-content: center;
  /* 定义了鼠标指针放在边界范围内时所用的光标形状为一只手 */
  cursor: pointer;
}
.cover-img {
  width: 100%;
  /* 设置渐变效果 */
  transition: all 0.75s;
}
.cover-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  /* 初始完全透明不可见 */
  opacity: 0;
  transition: all 0.5s;
}
.cover-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px;
  opacity: 0;
  /* 初始缩放 */
  transform: scale(0.7);
  transition: all 0.5s;
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2;
}
.cover-wrap:hover .cover-play {
  opacity: 1;
  transform: scale(1);
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07);
}
.album-title:hover {
  color: var(--primary-color);
}
.album-author {
  color: #999;
  line-height: 1.6;
}
.album-author:hover {
  color: var(--primary-color);
}
.album-time {
  color: #999;
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-item {
  display: inline-block;
  color: #a2a2a2;
  line-height: 50px;
  padding: 0 20px;
  margin: 10px;
  font-size: 16px;
}
.page-current, .page-item:not(.page-more):hover {
  background: var(--primary-color);
  color: white;
}
footer {
  margin-top: 60px;
  background: #333;
  height: 200px;
}


